<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" charset="utf-8" href="js/cdn-mirror/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" charset="utf-8" href="js/cdn-mirror/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" charset="utf-8" href="js/cdn-mirror/bootstrap-select/1.13.8/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" type="text/css" charset="utf-8" href="js/simple-switch/simple-switch.css"/>
    <script type="text/javascript" charset="utf-8" src="js/cdn-mirror/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cdn-mirror/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cdn-mirror/bootstrap-select/1.13.8/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/simple-switch/simple-switch.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/resources.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/alert.js"></script>

    <link rel="stylesheet" type="text/css" charset="utf-8" href="css/metro/app.css" />
    <link rel="stylesheet" type="text/css" charset="utf-8" href="css/metro/alert.css" />
</head>
<body>
    <div class="top-separator"></div>
    <ul class="tool-bar" id="tool-bar">
        <li><a class="tool-button btn-create" id="btn-create" title="New Tunnel"></a></li>
        <li><a class="tool-button btn-remove disabled" id="btn-remove" title="Remove Tunnel" disabled="disabled"></a></li>
        <li class="separator"></li>
        <li><a class="tool-button btn-ok disabled" id="btn-ok" title="save" disabled="disabled"></a></li>
        <li><a class="tool-button btn-cancel disabled" id="btn-cancel" title="cancel" disabled="disabled"></a></li>
    </ul>
    <div class="root-container">
        <ul class="server-list pull-left">
    <!--
            <li class="selected"><a>Server #1</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
            <li><a>Server #2</a></li>
    -->
        </ul>
        <table class="server-editor">
    <!--
            <tr>
                <td class="label-field" id="lbl-server-name">Server Name</td>
                <td><input type="text" class="form-control" placeholder="Server Name" id="server-name" /></td>
            </tr>
    -->
            <tr>
                <td class="label-field" id="lbl-server-host">Server Host</td>
                <td><input type="text" class="form-control maskable" placeholder="Server Host" id="server-host" readonly/></td>
            </tr>
            <tr>
                <td class="label-field" id="lbl-manage-port">Manage Port</td>
                <td><input type="text" class="form-control maskable number-field" placeholder="Manage Port" id="manage-port" readonly/></td>
            </tr>
            <tr>
                <td class="label-field" id="lbl-connector-port">Connector Port</td>
                <td><input type="text" class="form-control maskable number-field" placeholder="Manage Port" id="connector-port" readonly/></td>
            </tr>
            <tr>
                <td></td>
                <td class="error-message"></td>
            </tr>
        </table>
        <!-- <div>
            <button class="btn btn-info">info</button>
            <button class="btn btn-primary">prompt</button>
            <button class="btn btn-danger">error</button>
            <button class="btn btn-warning">warn</button>
            <button class="btn btn-success">success</button>
        </div> -->
    </div>

    <script type="text/javascript" charset="utf-8" src="js/jfx-bridge.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/lib.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/server-manage.js"></script>
</body>
</html>